<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频监控</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<body>
<table style="margin-left: 4%">
    <thead th:height="50px">
    <tr class="clear">
        <th style="width: 400px; text-align:center; font-size: xx-large">视频名</th>
        <th style="width: 150px; text-align:center; font-size: xx-large">视频时长</th>
        <th style="width: 250px; text-align:center; font-size: xx-large">未佩戴口罩</th>
        <th style="width: 150px; text-align:center; font-size: xx-large">佩戴口罩</th>
        <th style="width: 150px; text-align:center; font-size: xx-large">危险级别</th>
        <th style="width: 300px; text-align:center; font-size: xx-large">视频创建时间</th>
        <th style="width: 300px; text-align:center; font-size: xx-large">视频修改时间</th>
        <th style="width: 400px; text-align:center; font-size: xx-large">视频预览</th>
        <th style="width: 200px; text-align:center; font-size: xx-large">视频删除</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="records:${records}" class="clear">
        <td th:text="${records.video_name}" class="video_item" style="width: 400px; font-size: xx-large"></td>
        <td th:text="${records.video_time}" class="video_item" style="width: 150px; font-size: xx-large"></td>
        <td th:text="${records.without_mask_flag}" class="video_item" style="width: 250px; font-size: xx-large"></td>
        <td th:text="${records.with_mask_flag}" class="video_item" style="width: 150px; font-size: xx-large"></td>
        <td th:text="${records.dangerous_level}" class="video_item" style="width: 150px; font-size: xx-large"></td>
        <td th:text="${#dates.format(records.video_createTime,'yyyy-MM-dd HH:mm:ss')}" class="video_item"
            style="width: 300px; font-size: x-large"></td>
        <td th:text="${#dates.format(records.video_modifyTime,'yyyy-MM-dd HH:mm:ss')}" class="video_item"
            style="width: 300px; font-size: x-large"></td>
        <td style="width: 400px; text-align: center">
            <video width="400" height="300" controls="controls" autoplay muted>
                <source th:src="${records.video_url}"/>
            </video>
            <!-- 使用iframe嵌入本地视频 -->
            <!--          <iframe width="640px" height="480px" th:src="${records.video_url}" frameborder=0 allowfullscreen></iframe>-->
        </td>
        <td class="video_item" style="width: 200px; font-size: x-large">
            <a href="javascript:void(0)" th:onClick="delete_video([[ ${records} ]])"
               style="font-size: xx-large; color: #0e8cd9">删除</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
<script>
    function delete_video(records) {
        if (confirm("确认要删除视频" + records.video_name + "？")) {
            $.ajax({
                url: 'delete/',
                data: {
                    id: records.id
                },
                type: 'post',
                success: function (data) {
                    alert(records.video_name + "视频删除成功！");
                    window.location.reload();
                }
            })
        }
    }

</script>
</html>

<style>
    body {
        width: auto;
        height: auto;
    }

    .video_item {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-all;
        height: 350px;
        text-align: center;
    }

    th {
        display: block;
        float: left;
        height: 50px;
        font-size: 15px;
        background-color: #0ddede;
    }

    .clear {
        content: '';
        clear: both;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>
